// 基础变量

.row3 {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
  margin: 10rpx 0;
  display: flex;
  flex-direction: column;
  background: #fff;

  // 标题区域 - 强制一行显示
  .title {
    width: 100%;
    white-space: nowrap; // 禁止标题换行
    overflow: hidden;    // 隐藏溢出内容
    text-overflow: ellipsis; // 溢出显示省略号
    margin-bottom: 18rpx;

    text {
      font-size: 30rpx;
      font-weight: 600;
      color: @color-text-dark;
      display: inline-block;
    }
  }

  // 内容容器 - 一行显示两个卡片
  display: flex;
  gap: 16rpx;
  width: 100%;
  box-sizing: border-box;

  // 卡片样式
  .quick-item {
    flex: 1; // 平均分配宽度
    background: #fff;
    padding: 22rpx;
    display: flex;
    align-items: center;
    gap: 16rpx;

    //box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
    //transition: all 0.2s ease;

    // 图标样式
    .iconfont {
      font-size: 44rpx;
      flex-shrink: 0; // 图标不收缩
    }

    // 卡片内容区 - 包含标题和按钮
    .card-content {
      display: flex;
      align-items: center;
      justify-content: space-between; // 标题和按钮两端对齐
      flex: 1; // 占满剩余空间
      min-width: 0; // 允许内容收缩

      .card-title {
        font-size: 26rpx;
        color: @color-text-dark;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      // 按钮样式
      wot-button {
        padding: 6rpx 16rpx;
        font-size: 22rpx;
        white-space: nowrap; // 按钮文字不换行
      }
    }

    // 紧急联系卡片配色
    &:first-child {
      .iconfont {
        color: @color-danger;
      }
    }

    // 健康状态卡片配色
    &:last-child {
      .iconfont {
        color: @color-blue;
      }
    }

  }
}
